/**
 * 嵌套表格组件
 * @tips 使用深拷贝时，如果数据中有function，不可使用JSON方法转化
 */
import moment from 'moment';
import React from 'react';
import { FirstHeaderC, TableC, NestedTableC } from '../../comps';

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
  { title: 'Version', dataIndex: 'version', key: 'version' },
  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
];
const columns1 = [
  { title: 'Key', dataIndex: 'key', width: 100, key: 'key', sorter: true },
  { title: 'Date', dataIndex: 'date', width: 100, key: 'date', ellipsis: true },
  { title: 'Name', dataIndex: 'name', width: 100, key: 'name', ellipsis: true },
  { title: 'Status', width: 100, key: 'state', dataIndex: 'state' },
  { title: 'Status1', width: 100, key: 'state1', dataIndex: 'state1' },
  { title: 'Status2', width: 100, key: 'state2', dataIndex: 'state2' },
  { title: 'Status3', width: 100, key: 'state3', dataIndex: 'state3' },
  { title: 'Status4', width: 100, key: 'state4', dataIndex: 'state4' },
  { title: 'Status5', width: 100, key: 'state5', dataIndex: 'state5' },
  { title: 'Status6', width: 100, key: 'state6', dataIndex: 'state6' },
  { title: 'Status7', width: 100, key: 'state7', dataIndex: 'state7' },
  { title: 'Status8', width: 100, key: 'state8', dataIndex: 'state8' },
  { title: 'Status9', width: 100, key: 'state9', dataIndex: 'state9' },
  { title: 'Status10', width: 100, key: 'state10', dataIndex: 'state10' },
  { title: 'Status11', width: 100, key: 'state11', dataIndex: 'state11' },
  { title: 'Status12', width: 100, key: 'state12', dataIndex: 'state12' },
  { title: 'Status13', width: 100, key: 'state13', dataIndex: 'state13' },
  { title: 'Status14', width: 100, key: 'state14', dataIndex: 'state14' },
  { title: 'Status15', width: 100, key: 'state15', dataIndex: 'state15' },
  { title: 'Status16', width: 100, key: 'state16', dataIndex: 'state16' },
  { title: 'Status17', width: 100, key: 'state17', dataIndex: 'state17' },
];
const data = [];
for (let i = 0; i < 3; ++i) {
  data.push({
    key: i,
    name: 'Screem',
    platform: 'iOS',
    version: '10.3.4.5654',
    upgradeNum: 500,
    creator: 'Jack',
    createdAt: '2014-12-24 23:12:00',
  });
}
class NestedTableDemo extends React.Component {
  state = {
    columns,
    dataSource: data,
    dataSource1: data,
  };

  // 构造嵌套表格数据
  cteateNestedData = (record) => {
    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
    const index = dataSource.findIndex((item) => item.key === record.key);
    const nestedData = [];
    for (let j = 0; j < 3 + Math.random() * 10; j++) {
      nestedData.push({
        key: `child${j}`,
        date: '2014-12-24 23:12:00',
        name: 'This is production name',
        state: `Upgraded: ${j}`,
      });
    }
    const nestedConfig = {
      columns: columns1,
      dataSource: nestedData,
      rowKey: 'key',
    };
    dataSource[index].loading = false;
    dataSource[index].nestedConfig = nestedConfig;
    this.setState({
      dataSource,
    });
  };

  // 点击二级表格展开
  onNestedExtend = (expanded, record) => {
    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
    const index = dataSource.findIndex((item) => item.key === record.key);
    if (index > -1 && expanded) {
      // 这里写逻辑，处理数据
      dataSource[index].loading = true;
      this.setState(
        {
          dataSource: JSON.parse(JSON.stringify(dataSource)),
        },
        () => {
          setTimeout(() => {
            this.cteateNestedData(record);
          }, 2000);
        },
      );
    }
  };

  // 嵌套表格1
  nestedTableRender1 = () => {
    const { columns, dataSource } = this.state;
    return (
      <>
        <FirstHeaderC title='嵌套表格，无分页' />
        <NestedTableC rowKey='key' scroll={{ x: '100%' }} columns={columns} dataSource={dataSource} commonHeader={false} onExpand={this.onNestedExtend} />
      </>
    );
  };

  // 嵌套表格2 共用表头 固定操作列
  nestedTableRender2 = () => {
    const columns1 = [
      { title: 'key', key: 'key', width: '100px', fixed: 'left' },
      { title: 'Name', key: 'name', width: '200px' },
      { title: '价格(保留4位）', width: '100px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '200px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '200px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
      { title: '日期1', width: '200px', key: 'createdAt1' },
      { title: '日期2', width: '200px', key: 'createdAt2' },
      { title: '日期3', width: '200px', key: 'createdAt3' },
      { title: '日期4', width: '200px', key: 'createdAt4' },
      { title: '日期5', width: '200px', key: 'createdAt5' },
      { title: 'Action', width: '100px', key: 'operation', fixed: 'right', render: () => <a>action</a> },
    ];
    const data1 = [];
    for (let i = 0; i < 5; i++) {
      const children = [];
      if (i % 2 == 0) {
        for (let j = 0; j < 2; j++) {
          children.push({
            key: `${i}-${i}-${j}`,
            name: `name${i}-${j}`,
            platform: Math.random() * 100,
            version: `1.0.${i}-${j}`,
            upgradeNum: Math.random() * 10000,
            creator: Math.random(),
            price: Math.random() * 10000,
            createdAt1: moment().format('YYYY-MM-DD'),
          });
        }
      }
      data1.push({
        key: `${i}-${i}`,
        name: `name${i}`,
        platform: Math.random() * 100,
        version: `1.0.${i}`,
        upgradeNum: Math.random() * 10000,
        creator: Math.random(),
        price: Math.random() * 10000,
        createdAt1: moment().format('YYYY-MM-DD'),
        children,
      });
    }
    return (
      <>
        <FirstHeaderC title='共用表头 固定操作列' />
        <NestedTableC rowKey='key' columns={columns1} scroll={{ x: 2300 }} dataSource={data1} commonHeader={true} />
      </>
    );
  };

  // 3. 子表格固定操作列
  // 注：父子表格共用表头，可同时使用固定列，父子表格不共用表头，父级表格不推荐使用固定列，会样式错乱，antd控制台也会报error提示
  nestedTableRender3 = () => {
    const columns1 = [
      { title: 'key', width: '100px', key: 'key' },
      { title: 'Name', width: '200px', key: 'name' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '100px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '100px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
      { title: '日期1', width: '100px', key: 'createdAt1' },
    ];
    const columns2 = [
      { title: 'key', width: '200px', key: 'key' },
      { title: 'Name', width: '100px', key: 'name' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '200px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '200px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
      { title: '日期1', width: '200px', key: 'createdAt1' },
      { title: '日期2', width: '200px', key: 'createdAt2' },
      { title: '日期3', width: '200px', key: 'createdAt3' },
      { title: '日期4', width: '200px', key: 'createdAt4' },
      { title: '日期5', width: '200px', key: 'createdAt5' },
      { title: '日期6', width: '200px', key: 'createdAt6' },
      { title: '日期7', width: '200px', key: 'createdAt7' },
      { title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => <a>action</a> },
    ];
    const data1 = [];
    for (let i = 0; i < 5; i++) {
      const children = [];
      if (i % 2 == 0) {
        for (let j = 0; j < 10; j++) {
          children.push({
            key: `${1}-${i}-${j}`,
            name: `name${i}-${j}`,
            platform: Math.random() * 100,
            version: `1.0.${i}-${j}`,
            upgradeNum: Math.random() * 10000,
            creator: Math.random(),
            price: Math.random() * 10000,
            createdAt1: moment().format('YYYY-MM-DD'),
          });
        }
      }
      data1.push({
        key: `${1}-${i}`,
        name: `name${i}`,
        platform: Math.random() * 100,
        version: `1.0.${i}`,
        upgradeNum: Math.random() * 10000,
        creator: Math.random(),
        price: Math.random() * 10000,
        createdAt1: moment().format('YYYY-MM-DD'),
        nestedConfig: {
          dataSource: children,
          columns: columns2,
        },
      });
    }
    return (
      <>
        <FirstHeaderC title='子表格固定操作列' />
        <NestedTableC rowKey='key' scroll={{ x: '100%' }} columns={columns1} dataSource={data1} commonHeader={false} />
      </>
    );
  };

  // 子级宽度都超出屏幕宽度
  nestedTableRender4 = () => {
    const columns1 = [
      { title: 'key', width: '100px', key: 'key' },
      { title: 'Name', width: '100px', key: 'name' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '100px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '100px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
      { title: '日期1', width: '100px', key: 'createdAt1' },
      { title: '日期2', width: '200px', key: 'createdAt2' },
      { title: '日期3', width: '200px', key: 'createdAt3' },
      { title: '日期4', width: '200px', key: 'createdAt14' },
      { title: '日期5', width: '200px', key: 'createdAt15' },
      { title: '日期5', width: '200px', key: 'createdAt16' },
      { title: '日期5', width: '200px', key: 'createdAt17' },
      { title: '日期5', width: '200px', key: 'createdAt18' },
    ];
    const columns2 = [
      { title: 'key', width: '100px', key: 'key' },
      { title: 'Name', width: '100px', key: 'name' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '200px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '200px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
      { title: '日期1', width: '200px', key: 'createdAt1' },
      { title: '日期2', width: '200px', key: 'createdAt2' },
      { title: '日期3', width: '200px', key: 'createdAt3' },
      { title: '日期4', width: '200px', key: 'createdAt4' },
      { title: '日期5', width: '200px', key: 'createdAt5' },
      { title: '日期6', width: '200px', key: 'createdAt6' },
      { title: '日期7', width: '200px', key: 'createdAt7' },
    ];
    const data1 = [];
    for (let i = 0; i < 5; i++) {
      const children = [];
      if (i % 2 == 0) {
        for (let j = 0; j < 10; j++) {
          children.push({
            key: `${1}-${i}-${j}`,
            name: `name${i}-${j}`,
            platform: Math.random() * 100,
            version: `1.0.${i}-${j}`,
            upgradeNum: Math.random() * 10000,
            creator: Math.random(),
            price: Math.random() * 10000,
            createdAt1: moment().format('YYYY-MM-DD'),
          });
        }
      }
      data1.push({
        key: `${1}-${i}`,
        name: `name${i}`,
        platform: Math.random() * 100,
        version: `1.0.${i}`,
        upgradeNum: Math.random() * 10000,
        creator: Math.random(),
        price: Math.random() * 10000,
        createdAt1: moment().format('YYYY-MM-DD'),
        nestedConfig: {
          dataSource: children,
          columns: columns2,
        },
      });
    }
    return (
      <>
        <FirstHeaderC title='数据一次全部查询，父子表格宽度都超出屏幕' />
        <NestedTableC rowKey='key' scroll={{ x: 3000 }} columns={columns1} dataSource={data1} commonHeader={false} />
      </>
    );
  };

  // 构造数据
  cteateNestedData5 = (pagination, record) => {
    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource1));
    const index = dataSource.findIndex((item) => item.key === record.key);
    const nestedConfig = dataSource[index].nestedConfig || {};
    if (!nestedConfig.total) {
      nestedConfig.total = 10 + parseInt(10 * Math.random());
    }
    const currentSize = pagination.pageSize * pagination.current > nestedConfig.total ? nestedConfig.total - pagination.pageSize * (pagination.current - 1) : pagination.pageSize;
    const data1 = [];
    for (let i = 0; i < currentSize; i++) {
      data1.push({
        key: `child${pagination.pageSize * (pagination.current - 1) + i}`,
        date: '2014-12-24 23:12:00',
        name: 'This is production name',
        state: `Upgraded: ${i}`,
      });
    }
    // 将获取到的子表格数据追加到数据中
    dataSource[index].loading = false;
    dataSource[index].nestedConfig = {
      rowKey: 'key',
      columns: columns1,
      dataSource: data1,
      hidePage: false,
      pageSize: pagination.pageSize,
      current: pagination.current,
      total: nestedConfig.total,
    };
    this.setState({
      dataSource1: JSON.parse(JSON.stringify(dataSource)),
    });
  };

  // 点击展开
  onNestedExtend5 = (expanded, record) => {
    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource1));
    const index = dataSource.findIndex((item) => item.key === record.key);
    if (index > -1 && expanded) {
      // 这里写逻辑，处理数据
      dataSource[index].loading = true;
      this.setState(
        {
          dataSource1: JSON.parse(JSON.stringify(dataSource)),
        },
        () => {
          setTimeout(() => {
            this.cteateNestedData5({ current: 1, pageSize: 10 }, record);
          }, 2000);
        },
      );
    }
  };

  // 点击二级表格页码变化
  nestedTableChange5 = ({ pagination, filters, sorter, record }) => {
    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource1));
    const index = dataSource.findIndex((item) => item.key === record.key);
    if (index > -1) {
      // 这里写逻辑，处理数据
      dataSource[index].loading = true;
      this.setState(
        {
          dataSource1: JSON.parse(JSON.stringify(dataSource)),
        },
        () => {
          setTimeout(() => {
            this.cteateNestedData5(pagination, record);
          }, 2000);
        },
      );
    }
  };

  // 嵌套表格有分页
  nestedTableRender5 = () => {
    const { columns, dataSource1 } = this.state;
    return (
      <>
        <FirstHeaderC title='嵌套表格，有分页' />
        <NestedTableC
          rowKey='key'
          scroll={{ x: '100%' }}
          columns={columns}
          dataSource={dataSource1}
          commonHeader={false}
          onExpand={this.onNestedExtend5}
          nestedTableChange={this.nestedTableChange5}
        />
      </>
    );
  };

  // 父级表格超宽，二级表格宽度固定,fixedChild 入参为true
  nestedTableRender6 = () => {
    const columns1 = [
      { title: 'key', width: '100px', key: 'key' },
      { title: 'Name', width: '100px', key: 'name', type: 'filterCol' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '200px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '200px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
      { title: '日期1', width: '100px', key: 'createdAt1' },
      { title: '日期2', width: '200px', key: 'createdAt2' },
      { title: '日期3', width: '200px', key: 'createdAt3' },
      { title: '日期4', width: '200px', key: 'createdAt14' },
      { title: '日期5', width: '200px', key: 'createdAt15' },
      { title: '日期6', width: '200px', key: 'createdAt16' },
      { title: '日期7', width: '200px', key: 'createdAt17' },
      { title: '日期8', width: '200px', key: 'createdAt18' },
    ];
    const columns2 = [
      { title: 'key', width: '100px', key: 'key' },
      { title: 'Name', width: '100px', key: 'name' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '200px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '200px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
    ];
    const dataSource = [];
    for (let i = 0; i < 3; i++) {
      const _data = [];
      for (let j = 0; j < 3 + Math.random() * 7; j++) {
        _data.push({
          key: `0-${j}`,
          name: `Tom-${j}`,
          platform: 1000 + Math.random() * 1000,
          version: `0.0.${j}`,
          upgradeNum: 1000 + Math.random() * 1000,
          creator: Math.random() * 100,
          price: Math.random() * 100,
        });
      }
      dataSource.push({
        key: `0-${i}`,
        name: `Jack-${i}`,
        platform: 1000 + Math.random() * 1000,
        version: `0.0.${i}`,
        upgradeNum: 1000 + Math.random() * 1000,
        creator: Math.random() * 100,
        price: Math.random() * 100,
        nestedConfig: {
          dataSource: _data,
          columns: columns2,
          scroll: { x: 1200 },
        },
      });
    }
    return (
      <>
        <FirstHeaderC title='父级表格超宽，二级表格宽度固定' />
        <NestedTableC rowKey='key' scroll={{ x: 3000 }} columns={columns1} dataSource={dataSource} fixedChild={true} commonHeader={false} />
      </>
    );
  };

  // 三级子表格
  nestedTableRender7() {
    const columns1 = [
      { title: 'key', width: '100px', key: 'key' },
      { title: 'Name', width: '100px', key: 'name' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '200px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '200px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
      { title: '日期1', width: '100px', key: 'createdAt1' },
      { title: '日期2', width: '200px', key: 'createdAt2' },
      { title: '日期3', width: '200px', key: 'createdAt3' },
      { title: '日期4', width: '200px', key: 'createdAt14' },
      { title: '日期5', width: '200px', key: 'createdAt15' },
      { title: '日期6', width: '200px', key: 'createdAt16' },
      { title: '日期7', width: '200px', key: 'createdAt17' },
      { title: '日期8', width: '200px', key: 'createdAt18' },
    ];
    const columns2 = [
      { title: 'key', width: '100px', key: 'key' },
      { title: 'Name', width: '100px', key: 'name' },
      { title: '价格(保留4位）', width: '200px', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', width: '200px', key: 'version' },
      { title: '数值', width: '200px', key: 'upgradeNum', type: 'number' },
      { title: '比率', width: '200px', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', width: '200px', key: 'price', type: 'money' },
    ];
    const dataSource = [];
    for (let i = 0; i < 3; i++) {
      const _data = [];
      for (let j = 0; j < 3 + Math.random() * 7; j++) {
        const _data3 = [];
        for (let k = 0; k < 2 + Math.random() * 5; k++) {
          _data3.push({
            key: `0-${j}-${k}`,
            name: `Tom-${j}-${k}`,
            platform: 1000 + Math.random() * 1000,
            version: `0.0.${j}-${k}`,
            upgradeNum: 1000 + Math.random() * 1000,
            creator: Math.random() * 100,
            price: Math.random() * 100,
          });
        }
        _data.push({
          key: `0-${j}`,
          name: `Tom-${j}`,
          platform: 1000 + Math.random() * 1000,
          version: `0.0.${j}`,
          upgradeNum: 1000 + Math.random() * 1000,
          creator: Math.random() * 100,
          price: Math.random() * 100,
          nestedConfig: {
            dataSource: _data3,
            columns: columns2,
          },
        });
      }
      dataSource.push({
        key: `0-${i}`,
        name: `Jack-${i}`,
        platform: 1000 + Math.random() * 1000,
        version: `0.0.${i}`,
        upgradeNum: 1000 + Math.random() * 1000,
        creator: Math.random() * 100,
        price: Math.random() * 100,
        nestedConfig: {
          dataSource: _data,
          columns: columns2,
          scroll: { x: 1200 },
          expandedRowRender: (record) => {
            return <TableC dataSource={record.nestedConfig.dataSource} columns={record.nestedConfig.columns} hidePage={true} />;
          },
        },
      });
    }
    return (
      <>
        <FirstHeaderC title='三级表格' />
        <NestedTableC rowKey='key' scroll={{ x: 3000 }} columns={columns1} dataSource={dataSource} commonHeader={false} />
      </>
    );
  }

  render() {
    return (
      <div>
        {this.nestedTableRender1()}
        {this.nestedTableRender5()}
        {this.nestedTableRender2()}
        {this.nestedTableRender3()}
        {this.nestedTableRender4()}
        {this.nestedTableRender6()}
        {this.nestedTableRender7()}
      </div>
    );
  }
}

export default NestedTableDemo;
